<template>
    <div>
        <div class="Dialog" v-show="data[0]">
            <span class="iconfont cha" @click="show()" >&#xe61a;</span>
            <slot name='title'></slot>
            <div class="zf-box">
                <ul>
                    <li @click="fund()"  style="display:fixed">
                        <img src="../../public/homeImg/cat.jpg" alt="">
                        <div class="one">
                            <span>新建歌单</span>
                        </div>
                    </li>
                    <ul>
                        <li>
                        <img src="../../public/homeImg/cat.jpg" alt="">
                        <div>
                            <span>光</span>
                            <span>406首音乐，0首已下载</span>
                        </div>
                    </li>
                    <li>
                        <img src="../../public/homeImg/cat.jpg" alt="">
                        <div>
                            <span>喜欢的歌单</span>
                            <span>406首音乐，0首已下载</span>
                        </div>
                    </li>
                    <li>
                        <img src="../../public/homeImg/cat.jpg" alt="">
                        <div>
                            <span>新建歌单</span>
                            <span>406首音乐，0首已下载</span>
                        </div>
                    </li>
                    <li>
                        <img src="../../public/homeImg/cat.jpg" alt="">
                        <div>
                            <span>新建歌单</span>
                            <span>406首音乐，0首已下载</span>
                        </div>
                    </li>
                    </ul>
                </ul>
            </div>
            
        </div>
    </div>
</template>
<script>
import Char from './slotChar.vue'
export default {
   data() {
    return {
        num:140,
        contentFrind:[],
        // isShowZf:this.data[2]
        isShowFund:false
    }
   },
   props:{
     data:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
   watch:{

   },
   components:{Char},
   mounted() {
   },
   methods:{
    show(){
        this.$emit("dislogScSoon", !this.data[0])

    },
    //按新建 关闭收藏弹窗 修改父级组件打开新建弹窗
    fund(){
        this.$emit('fund',true)
        this.$emit("dislogScSoon", !this.data[0])
    }
   }
   
}
</script>
<style lang="less" scoped>
    .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
}
.Dialog{
    z-index: 999;
    box-shadow: 0px 0px 7px rgb(0 0 0 / 9%);
   
    background: white;
    border-radius: 20px;
    width: 587px;
   
    text-align: center;
   position:fixed;
   top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    span{

        cursor: pointer;
          text-align: right;
        margin: 6px 0;
    }
    .cha{
        font-size: 20px;
        color: black;
        display: block;
        margin: 18px 26px 0 0;
    }
    .cha:hover{
        color: #9F9F9F;
    }
   span[name='title']{
    font-size: 20px;
    font-weight: 800;
     color: black;
   }

   .zf-box{
    margin-bottom: 20px;
       margin-top: 20px;

    box-sizing: border-box;
        position: relative;
    ul{
             
        li:hover{
            background: #EEEFF0;
            cursor: pointer;
        }
        li:first-child:hover{
            background: none;
        }
        li{
             padding: 15px 20px;
            display: flex;

            .one{
                display: flex;
                align-items: center;
                justify-content: center;
                span:first-child{
                    color: #333333;
                    font-size: 18px;
                }
            }
            img{
                height: 76px;
                width: 76px;
                border-radius: 5px;
            }
            div{
                span:first-child{
                    font-size: 15px;
                    color: #333333;
                }
                span:last-child{
                    color: #666666;
                    color: 14px;
                    font-size: 14px;
                }
            }
            span{
                margin-left: 20px;
                text-align: left;
                display: block;
                
            }
        }
        ul::-webkit-scrollbar{
            width: 8px;

        }
        ul::-webkit-scrollbar-thumb{
             border-radius: 10px;
    background: #E1E1E1;
        }
           ul{
            max-height:  310px;
     overflow-y: auto;
            li:hover{
            background: #EEEFF0;
            cursor: pointer;
            }
        li:first-child:hover{
            background: none;
        }
        li{
             padding: 15px 20px;
            display: flex;

            
            img{
                height: 76px;
                width: 76px;
                border-radius: 5px;
            }
            div{
                span:first-child{
                    font-size: 15px;
                    color: #333333;
                }
                span:last-child{
                    color: #666666;
                    color: 14px;
                    font-size: 14px;
                }
            }
            span{
                margin-left: 20px;
                text-align: left;
                display: block;
                
            }
        }
        } 
    }

   }
   .zf-box:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }
   .zf-button{
    float: right;
    outline: none;
    font-size: 15px;
    background: #EC4141;
    border: none;
    padding: 10px 38px;
    color: white;
    border-radius: 17px;
    letter-spacing: 4px;
    margin-top: 38px;
    
   }
}
   
</style>